<template>
  <div class="card pb-2 flex gap-2" :bordered="false" :loading="libraryTable.loading">
    <Category />
    <div v-if="libraryTable.data.length > 0" class="grid grid-cols-5 w-full gap-2">
      <div v-for="(item, key) in libraryTable.data" :key="key">
        <a-card :body-style="{ padding: '0' }" :loading="libraryTable.loading" class="image-card">
          <div class="info absolute top-0 right-0 text-[12px]">
            <div>{{ formatBytes(item.bytes) }}</div>
            <!-- <div>

              {{ item.width }}x{{ item.height }}
            </div> -->
          </div>
          <div
            class="actions absolute bottom-2 right-2 flex justify-center flex-col gap-2 z-10"
            v-if="store.$state.user.deptId === item.deptId"
          >
            <div class="icon bg-blue-500" @click="editLibrary(item.resId)">
              <IconEdit />
            </div>
            <a-popconfirm
              :content="t['是否执行']"
              okText="Ok"
              :cancelText="t['取消']"
              @ok="delLibrary(item.resId)"
            >
              <div class="icon bg-red-500">
                <IconDelete />
              </div>
            </a-popconfirm>
          </div>

          <!-- 封面图片 -->
          <div v-if="item.status === '0'" class="media">
            <a-image v-if="item.type === '0'" height="120" fit="contain" :src="item.uri" />
            <video
              v-else-if="item.type === '1'"
              :key="item.uri"
              controls
              :src="item.uri"
              height="120"
              controlslist="nodownload"
            ></video>
          </div>
          <div v-else-if="item.status === '1'" class="media audit">{{ t["正在审核"] }}</div>
          <div v-else-if="item.status === '2'" class="media reject">
            {{ item.reason }}
          </div>
          <!--  -->
          <div class="p-4">
            <a-badge :color="reviewStatusList[item.status].color" :count="1" dot :offset="[6, -2]">
              <span class="text-gray-500 text-[12px]">{{
                t[reviewStatusList[item.status].title]
              }}</span>
            </a-badge>
            <a-tooltip :content="item.name">
              <div class="text-nowrap material-title">
                {{ item.name }}
              </div>
            </a-tooltip>
          </div>
        </a-card>
      </div>
    </div>
    <a-empty v-else></a-empty>
  </div>
</template>

<script setup lang="ts">
import { userStore } from "@/store/modules/user/user";

import { formatBytes } from "@/utils/format";
import { reviewStatusList } from "../../review/data/options";
import { delLibrary, editLibrary, listLibrary, listLibrarySize, resetQuery } from "../data/curd";
import { libraryTable } from "../data/table";
import Category from "./Category.vue";

const t = translate("公共模块");
const store = userStore();
onMounted(async () => {
  await listLibrary();
  await listLibrarySize();
});

onUnmounted(() => {
  resetQuery();
});
</script>

<style lang="scss" scoped>
::v-deep(.arco-card-meta-footer) {
  margin-top: 8px;
}

.media {
  height: 160px;
  overflow: hidden;
  padding: 0 0;
  display: flex;
  place-items: center;
  place-content: center;
  overflow: hidden;
  width: 100%;
  background: #00000009;

  img,
  video {
    width: 100%;
    height: 80%;
    object-fit: contain;
  }
}

.reject {
  background: #f8f5f2;
  color: red;
}

.audit {
  background: #f8f5f2;
  color: orange;
}

.material-title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-card {
  .actions {
    opacity: 0;

    .icon {
      width: 24px;
      height: 24px;
      display: flex;
      place-items: center;
      place-content: center;
      border-radius: 50%;
      color: white;
    }
  }

  .info {
    opacity: 0;
  }

  &:hover {
    .actions {
      opacity: 1;
    }

    .info {
      opacity: 1;
    }
  }
}
</style>
